<script setup>
import NoteCard from '@/components/forum/noteCard.vue';
import Pagination from '@/components/pagination.vue';

import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';

import bus from '@/utils/bus';

import { getInvitedNoteList, getMyNoteList } from '@/api/note'
import { getMyAttentionListService } from '@/api/attention'

bus.on('attention', () => {
    console.log('attention，需要刷新');
    getNoteList()
})

const route = useRoute()
let id = ref(route.query.id)

const loading = ref(false)
const noteData = ref([])
const page = ref(1)
const pageSize = ref(3)
const pageSizes = [3, 4, 5, 6, 50]
const total = ref(0)

const getNoteList = async () => {
    loading.value = true
    if (id.value == 2) {
        try {
            const res = await getInvitedNoteList(page.value, pageSize.value)
            noteData.value = res.data.list
            total.value = res.data.total
        } finally {
            loading.value = false
        }
    } else if (id.value == 3) {
        try {
            const res = await getMyNoteList(page.value, pageSize.value)
            noteData.value = res.data.list
            total.value = res.data.total
            loading.value = false
        } finally {
            loading.value = false
        }
    } else if (id.value == 4) {
        try {
            const res = await getMyAttentionListService(page.value, pageSize.value)
            console.log("关注列表：", res.data);
            noteData.value = res.data.list
            total.value = res.data.total
            loading.value = false
        } finally {
            loading.value = false
        }
    }

}

//分页逻辑
const handlePagination = () => {
    getNoteList()
}

watch(() => route.query.id, (newVal, oldVal) => {
    id.value = newVal
    getNoteList()
})

onMounted(() => {
    console.log('执行', id.value);

    // console.log(id.value);
    getNoteList()
})

</script>
<template>
    <div class="mynote">
        <div class="forum-table" v-loading="loading">

            <div v-if="noteData.length">
                <NoteCard v-for="item in noteData" :key="item.noteId" :nodeData="item"
                    :showLocation="id == 4 ? true : false"></NoteCard>
                <Pagination :hidden="noteData.length" v-mode:page="page" v-model:pageSize="pageSize"
                    :page_Sizes="pageSizes" :total="total" @pagination="handlePagination"></Pagination>
            </div>

            <el-empty v-else class="empty" description="暂无数据" />
        </div>
    </div>

</template>
<style scoped lang='scss'>
.mynote {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.forum-table {
    width: 60rem;
    display: flex;
    flex-direction: column;
}
</style>